import {
  LocalizationContext,
  MinimalButton,
  Position,
  Tooltip,
} from "../../core";

import { RenderRotateProps } from "./Rotate";
import RotateBackwardIcon from "./RotateBackwardIcon";
import RotateForwardIcon from "./RotateForwardIcon";
import RotateDirection from "./RotateDirection";
import { FC, useContext } from "react";

const TOOLTIP_OFFSET = { left: 0, top: 8 };

const RotateButton: FC<RenderRotateProps> = ({ direction, onClick }) => {
  const l10n = useContext(LocalizationContext);

  const backwardLabel =
    l10n && l10n.rotate
      ? l10n.rotate.rotateBackward
      : "Rotate counterclockwise";
  const forwardLabel =
    l10n && l10n.rotate ? l10n.rotate.rotateForward : "Rotate clockwise";
  const label =
    direction === RotateDirection.Backward ? backwardLabel : forwardLabel;
  const icon =
    direction === RotateDirection.Backward ? (
      <RotateBackwardIcon />
    ) : (
      <RotateForwardIcon />
    );

  return (
    <Tooltip
      position={Position.BottomCenter}
      target={<MinimalButton onClick={onClick}>{icon}</MinimalButton>}
      content={() => label}
      offset={TOOLTIP_OFFSET}
    />
  );
};

export default RotateButton;
